<template>
  <section>
    <el-dialog title="地址选择" :visible.sync="mapVisible" width="60%" top="1%">
      <baidu-map :center="start" :zoom="zoom" :scroll-wheel-zoom="true">
        <!--定位-->
        <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
                        :showAddressBar="true"
                        :autoLocation="true"
        />
        <!--缩放工具-->
        <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
        <!--搜索框-->
        <bm-auto-complete v-model="keyword" :sugStyle="{zIndex: 9999}">
          <div style="margin-bottom:10px;margin-top: -28px">
            <el-input type="text" style="width: 70%" v-model="searchAddress" auto-complete="off"
                      placeholder="请输入地址！"/>
            <el-button type="success" @click="selectAdrressConfirm">确定</el-button>
          </div>
        </bm-auto-complete>
        <!--    地图展示    -->
        <bm-view class="bmap"/>
        <bm-local-search :keyword="keyword" :auto-viewport="true" :panel="false"/>
        <!--驾车路线-->
        <bm-driving
          :start="start"
          :end="end"
          :auto-viewport="true"
          policy="BMAP_DRIVING_POLICY_LEAST_DISTANCE"
          :panel="false"
        >
        </bm-driving>
      </baidu-map>
    </el-dialog>
  </section>
</template>

<script>

export default {
  data() {
    return {
      //地图导航是否可见
      mapVisible: false,
      address: "",
      //地图
      zoom: 13,//地图缩放级别
      start: "西南财经大学天府学院成都校区(西区)", // 导航起点，地图中心点
      end: "", // 导航终点
      keyword: "",
      searchAddress: "",
    }
  },
  methods: {
    openMap(i, r) {
      this.selectAdrressConfirm()
      this.end = r.customer.address
    },
    selectAdrressConfirm() {
      this.end = this.keyword
    },
  },
  //展示列表
  mounted() {

  }
}

</script>

<style scoped>
.bmap {
  width: 100%;
  height: 600px;
}

.searchinput {
  width: 300px;
  box-sizing: border-box;
  padding: 9px;
  border: 1px solid #dddee1;
  line-height: 20px;
  font-size: 16px;
  height: 38px;
  color: #333;
  position: relative;
  border-radius: 4px;
}

.el-dialog__headerbtn {
  position: absolute;
  top: 9px;
  right: 11px;
  padding: 0;
  background: 0 0;
  border: none;
  outline: 0;
  cursor: pointer;
  font-size: 16px;
}
</style>
